<template>
  <div class="addWarehouse">
    <div class="form">
      <el-form ref="form" :rules="rules" :model="addForm">
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="仓库编码">
              <el-input
                v-model="addForm.code"
                placeholder="请输入内容"
                :disabled="true"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称" prop="name">
              <el-input
                v-model="addForm.name"
                clearable
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库类型" prop="type">
              <el-select v-model="addForm.type" placeholder="请选择" style="width:100%" clearable>
                <el-option label="中转仓" value="中转仓" />
                <el-option label="加工仓" value="加工仓" />
                <el-option label="储备仓" value="储备仓" />
                <el-option label="冷藏仓" value="冷藏仓" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item label="省/市/区" prop="selectedOptions">
              <el-cascader
                v-model="addForm.selectedOptions"
                clearable
                style="width:100%"
                size="large"
                :options="options"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="16">
            <el-form-item label="详细地址" prop="address">
              <el-input
                v-model="addForm.address"
                clearable
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库状态" prop="radio">
              <el-radio-group v-model="addForm.radio" style="width:100%">
                <el-radio label="启用">启用</el-radio>
                <el-radio label="停用">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="8">
            <el-form-item label="仓库面积">
              <el-input
                v-model="addForm.surface"
                clearable
                placeholder="请输入"
                onkeyup="value=value.replace(/[^1-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1')"
              >
                >
                <template #append>
                  m³
                </template>
                <el-input />
              </el-input></el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="personName">
              <el-input
                v-model="addForm.personName"
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" prop="phone">
              <el-input
                v-model="addForm.phone"
                clearable
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="Btn">
        <el-button round class="grey" @click="back">返回</el-button>
        <el-button round class="orange" @click="submit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeFactory, addWarehuose, editWarehuose, modifyWareHuose } from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  components: {},
  data() {
    return {
      // 城市级联
      options: regionData,
      type: '',
      // 仓库类型
      typeZ: {
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      // 仓库类型
      types: {
        中转仓: 'ZZ',
        加工仓: 'JG',
        储备仓: 'CB',
        冷藏仓: 'LC'
      },
      // 状态
      status: {
        停用: '0',
        启用: '1'
      },
      //
      addForm: {
        // 仓库编码
        selectedOptions: [],
        address: '',
        area: '',
        city: '',
        code: '',
        location: '',
        name: '',
        personName: '',
        phone: '',
        province: '',
        radio: '启用',
        surface: '',
        type: ''
      },
      // 回显数据
      data: {},
      // 表单校验
      rules: {
        name: [{ required: true, message: '请输入仓库名称', trigger: 'blur' }],
        type: [
          { required: true, message: '请选择仓库类型', trigger: 'change' }
        ],
        selectedOptions: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],
        address: [{ message: '请选择区域', trigger: 'change' }],
        radio: [{ required: true }],

        personName: [
          { required: true, message: '请选择区域', trigger: 'change' }
        ],
        phone: [
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const { data } = await getCodeFactory()
    this.addForm.code = data
    this.fetchWarehouse()
  },
  methods: {
    // 地图数据处理
    handleChange(value) {
      console.log(value)
      this.addForm.area = value[2]
      this.addForm.city = value[1]
      this.addForm.province = value[0]
      this.addForm.location = [CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]].join('/')
    },
    back() {
      this.$router.go(-1)
    },
    // 新建提交
    async submit() {
      this.$refs.form.validate(async valid => {
        if (!valid) return
        try {
          const obj = {
            address: this.addForm.address,
            area: this.addForm.area,
            city: this.addForm.city,
            code: this.addForm.code,
            location: this.addForm.location,
            name: this.addForm.name,
            personName: this.addForm.personName,
            phone: this.addForm.phone,
            province: this.addForm.province,
            status: this.status[this.addForm.radio],
            surface: this.addForm.surface,
            type: this.types[ this.addForm.type]
          }
          let res = {}
          if (this.$route.query.id) {
            for (const i in this.data) {
              if (obj[i]) {
                this.data[i] = obj[i]
              }
            }
            console.log(this.data)
            await modifyWareHuose(this.data)
            this.$router.push('/manage-base-info/warehouse')
            this.$message.success('新建完成')
          } else {
            res = await addWarehuose(obj)
            if (res.data) {
              this.$router.push('/manage-base-info/warehouse')
              this.$message.success('新建完成')
            } else {
              this.$message.error(res.msg)
            }
          }
        } catch (err) {
          console.dir(err)
          this.$message.error(err)
        }
      })
    },
    // 修改
    async fetchWarehouse() {
      if (this.$route.query.id) {
        const { data } = await editWarehuose(this.$route.query.id)
        console.log(data)
        this.data = data
        console.log([data.province, data.city, data.area])
        this.addForm = {
          selectedOptions: [data.province, data.city, data.area],
          address: data.address,
          area: data.area,
          city: data.ctiy,
          code: data.code,
          location: data.location,
          name: data.name,
          personName: data.personName,
          phone: data.phone,
          province: data.province,
          radio: data.status ? '启用' : '停用',
          surface: data.surface,
          type: this.typeZ[data.type]
        }
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.addWarehouse {
  height: 509px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  margin-top: 20px;
  margin-left: 29px;
  margin-right: 29px;
  padding-top: 25px;
  padding-bottom: 30px;
  .form {
    padding: 0 30px;
  }
}
::v-deep .el-input-group__append {
  width: 40px;
  height: 40px;
  background: #e7dfdf;
  border-radius: 0 6px 6px 0;
  padding: 0 10px;
  border: 0;
  color: #5d5d5d;
}
.Btn {
  // margin-top: 25px;
  padding-top: 25px;
  text-align: center;
  border-top: 1px solid #f5efee;
  .el-button {
    width: 170px;
  }
  //button
  .orange {
    background: #ffb200;
    color: #332929;
    border: 0;
    margin-right: 15px;
  }
  .grey {
    background: #f8f5f5;
    color: #332929;
    border: 0;
  }
  .orange:hover {
    background: #ff8e00;
  }
  .grey:hover {
    background: #ffb200;
  }
}
</style>
